In this tutorial i will show you how to fill a text with a gradient color using CSS. The effect css will provide a gradient color for the text.
HTML CODE:
<p class="gradient-text">
Gradient text
</p>
CSS CODE:
.gradient-text {
background: -webkit-linear-gradient(pink, red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
Description
- background: -webkit-linear-gradient(...) Provide a gradient background for text elements.
- webkit-text-fill-color: transparent Fill the text with a transparent color.
- webkit-background-clip: text Use a text clip background to fill the text with a gradient background as the color.
From the below video you can learn how to apply gradient text effect for heading. It will looks beautify your works.
Post your comments / questions
Recent Article
- The request was aborted: Could not create SSL/TLS secure channel -Error in Asp.net
- FieldError: Cannot resolve keyword 'id' into field in Django project
- How to hide the ID field from the Django admin?
- It is impossible to add a non nullable field without specifying a default. Django error
- ImportError: cannot import name 'url' from 'django.conf.urls' - Django Error
- How to Enable Virtualization in BIOS Security Settings in Intel Processors For Android Studio?
- Dependency 'androidx.activity:activity:1.8.0' requires libraries and applications that depend on it.
- AttributeError: 'NoneType' object has no attribute 'get_text' - Python
Related Article